<template>
  <div id="index">
    <HeaderItem></HeaderItem>
    <!-- 轮播图 -->
    <div class="swiper">
      <SwiperItem></SwiperItem>
    </div>
    <!-- 轮播图 -->
    <!-- 服务 -->
    <div class="servebox">
      <div class="serveleft">
        <div class="servetext">
          <p class="st-tit">我们的24小时服务</p>
          <p>逐步构建潜在客户</p>
          <p class="st-text">
            这是玛格丽特·麦卡利斯特，新泽西州怀尔德伍德斯宾塞女子学校的校长。兰多先生或太太在家
            吗? 是的，这就是她。兰多太太，当你丈夫让玛
            蒂尔达进入斯宾塞时，他告诉我们她有“问题”嗯，如你所知，我们为把陷入困境的女孩变成健康、有生产力的年轻女性而感到自豪。但是，如果他们不在这里，我们无能为力。现在，玛蒂尔
            达在近两周前未经许可离开了学校
          </p>
        </div>
      </div>
      <div class="serveright">
        <div class="srbox">
          <div class="sr-one" v-for="(item, i) in servelist" :key="i">
            <p class="sro-tit">{{ item.tit1 }}</p>
            <p class="sro-tit2">{{ item.tit2 }}</p>
            <div>
              <img :src="item.img" alt="" class="sro-img" />
            </div>
            <p class="sro-tit3">
              {{ item.tit3 }}
            </p>
            <div>
              <button class="sro-but">继续阅读👉</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务 -->
    <!-- 我们 -->
    <div class="usbox">
      <div class="us">
        <div class="usone">
          <h1>我们是谁</h1>
          <div class="uotext">
            <p class="uottit">独特的编排标准化</p>
            <p class="uottit2">
              通过亮争性社区逐步构建潜在的当务之急。专业地将用户
              战略主题领域产品化
            </p>
          </div>
          <div class="uotext">
            <p class="uottit">协同扩展开源</p>
            <p class="uottit2">
              通过竞争性社区逐步构建潜在的当务之急。专业地将用户
              战略主题领域产品化。
            </p>
          </div>
        </div>

        <div class="usone">
          <h1>我们做什么</h1>
          <div class="uotext">
            <p class="uottit">独特的编排标准化</p>
            <p class="uottit2">
              通过亮争性社区逐步构建潜在的当务之急。专业地将用户
              战略主题领域产品化
            </p>
          </div>
          <div class="uotext">
            <p class="uottit">协同扩展开源</p>
            <p class="uottit2">
              通过竞争性社区逐步构建潜在的当务之急。专业地将用户
              战略主题领域产品化。
            </p>
          </div>
        </div>

        <div class="ustwo">
          <p class="ustwotit">我们的能力</p>
          <ul>
            <li><img src="../assets/imagesfd/duihao.png" alt="" />机场服务</li>
            <li><img src="../assets/imagesfd/duihao.png" alt="" />机场服务</li>
            <li><img src="../assets/imagesfd/duihao.png" alt="" />机场服务</li>
            <li><img src="../assets/imagesfd/duihao.png" alt="" />机场服务</li>
            <li><img src="../assets/imagesfd/duihao.png" alt="" />机场服务</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 我们 -->
    <!-- 飞机 -->
    <div class="aircraftbox">
      <div class="aircraft">
        <h1>提供具有成本效益的产品</h1>
        <h4>可靠的海运和空运卸货</h4>
        <p class="airtext">
          Etiam non augue in tortor facilisis portitor at sit amet justo.Sed
          blandit tempor hendrerit. Suspendisse quis tincidunt nis.Nulla
          bibendum puruslit,ut hendrerit orci portitor id.Donec egestas dapibus
          massa, et tempor nulla ultricies quis.Donec mattis,metus vel pharetra
          pulvinar,nunc leo consecletur purus,sit amet tincidunt dui lorem ac
          elit Vivamus nula nisl,sodales eu rutrum sit amet,,viverra eu
          eros.Proinsollicitudin congue augue ,eget condimentum purus dictum sit
          amet.Aenean et tempor auque
        </p>
        <button class="airbut">获取报价→</button>
      </div>
    </div>
    <!-- 飞机 -->
    <!-- 机队 -->
    <div class="fleet">
      <h1 class="fleettitle">我们的机队</h1>
      <FleetItem></FleetItem>
    </div>
    <!-- 机队 -->
    <!-- 信赖 -->
    <div class="trustbox" style="height: 100%;">
      <h1 class="fleettitle">我们深受信赖</h1>
      <TrustItem></TrustItem>
    </div>
    <!-- 信赖 -->
    <!-- 重量和价格 -->
    <div class="weightbox">
      <div class="weight">
        <p class="weighttit">重量和价格</p>
        <div class="weightcent">
          <div class="weighttop">
            <div class="one" v-for="(item,i) in 4" :key="i">
              <div class="onetop">
                <p class="onetoptit1">标准</p>
                <p class="onetoptit2">4.95$</p>
              </div>
              <div class="onebot">7到10个工作日</div>
            </div>
          </div>
          <div class="weightbot">
            我们根据至少一磅的总重量计算每批货物的费率。
          </div>
        </div>
      </div>
    </div>
    <!-- 重量和价格 -->
    <!-- 尾部 -->
    <FooterItem></FooterItem>
    <!-- 尾部 -->
  </div>
</template>

<script>
import HeaderItem from "../components/HeaderItem.vue";
import FleetItem from "../components/FleetItem.vue";
import SwiperItem from "../components/SwiperItem.vue";
import TrustItem from "../components/TrustItem.vue";
import FooterItem from "../components/FooterItem.vue"
export default {
  components: {
    HeaderItem,
    FleetItem,
    SwiperItem,
    TrustItem,
    FooterItem
  },
  data() {
    return {
      swiperlist: [
        "src/assets/page/swiper_img.png",
        "src/assets/page/swiper_img.png",
        "src/assets/page/swiper_img.png",
      ],
      servelist: [
        {
          tit1: "海运",
          tit2: "卸货",
          tit3: " 通过克争性社区逐步构妞潜在的当务之急。专业地将用户战赔主题领城产品化",
          img: "src/assets/page/lunchuan.png",
        },
        {
          tit1: "航空",
          tit2: "运输",
          tit3: " 通过竞争性社区逐步构建潜在的当务之急。专业地将用户战略主题领域产品化",
          img: "src/assets/page/feiji.png",
        },
      ],
    };
  },
};
</script>


<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// 轮播图
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
// 轮播图
// 服务
.servebox {
  width: 100%;
  // height: 790px;
  display: flex;
  justify-content: space-between;
  .serveleft {
    width: 45%;
    background-color: #1a8ae1;
    color: white;
    display: flex;
    justify-content: right;
    .servetext {
      width: 50%;
      padding-top: 80px;
      padding-right: 35px;
      box-sizing: border-box;
    }
    .st-tit {
      font-size: 40px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .st-text {
      margin-top: 45px;
      line-height: 40px;
    }
  }
  .serveright {
    width: 55%;

    .srbox {
      display: flex;
      margin-top: 150px;
      box-sizing: border-box;
      .sr-one {
        width: 35%;
        margin: 30px;
        box-sizing: border-box;
        .sro-tit {
          font-size: 30px;
          font-weight: bold;
        }
        .sro-tit2 {
          font-weight: bold;
          font-size: 22px;
          color: #bcbcbc;
          margin-bottom: 23px;
        }
        .sro-tit3 {
          color: #62646c;
          line-height: 40px;
        }
        .sro-img {
          width: 100%;
        }
        .sro-but {
          padding: 5px 10px;
          box-sizing: border-box;
          color: white;
          border: none;
          background-color: #1a8ae1;
          border-radius: 10px;
        }
      }
    }
  }
}
// 服务
// 我们
.usbox {
  width: 100%;
  background-image: url(../assets/page/bg-what.png);
  background-position: center center;
  background-size: auto;
  background-size: 100% 100%;
  .us {
    width: 65%;
    margin: auto;
    padding: 150px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .usone {
      width: 30%;
      .uottit {
        font-weight: bold;
        margin: 30px 0 10px 0;
      }
      .uottit2 {
        line-height: 30px;
      }
    }
    .ustwo {
      background-color: #336cac;
      color: white;
      padding: 45px 120px 45px 45px;
      box-sizing: border-box;
      .ustwotit {
        font-weight: bold;
        font-size: 40px;
      }
    }
    .ustwo > ul > li {
      list-style: none;
      margin-top: 15px;
      box-sizing: border-box;
    }
    .ustwo > ul > li > img {
      width: 20px;
      height: 20px;
      margin-right: 20px;
    }
  }
}
// 我们
// 飞机
.aircraftbox {
  width: 100%;
  background-image: url(../assets/page/bg-feiji.png);
  background-size: 100% 100%;
  .aircraft {
    color: white;
    width: 65%;
    margin: auto;
    padding: 145px 0;
    box-sizing: border-box;
    .airtext {
      margin: 40px 0;
      line-height: 40px;
    }
    .airbut {
      padding: 20px 50px;
      color: black;
      border: none;
      border-radius: 30px;
    }
  }
}
// 飞机
.fleettitle {
  width: 65%;
  margin: auto;
  margin-top: 80px;
  margin-bottom: 40px;
}
// 重量价格

.weightbox {
  width: 100%;
  .weight {
    width: 65%;
    margin: auto;
    margin-top: 150px;
    margin-bottom: 150px;
    .weighttit {
      font-size: 40px;
      font-weight: bold;
      margin-bottom: 50px;
    }
    .weightcent {
      text-align: center;
      .weighttop {
        display: flex;
        .one {
          width: 25%;
          .onetop {
            font-weight: bold;
            color: white;
            background-color: #336cac;
            border: solid 1px #4a7eb8;
            padding: 40px 60px;
            box-sizing: border-box;
            .onetoptit1 {
              font-size: 25px;
            }
            .onetoptit2 {
              font-size: 55px;
            }
          }
          .onebot {
            padding: 20px 0;
            box-sizing: border-box;
            border: solid 1px #E8E8E8;
          }
        }
      }
      .weightbot {
        border: solid 1px #e9e9e9;
        width: 100%;
        color: #62646c;
        padding: 15px 0;
      }
    }
  }
}
// 重量价格

// 响应1024px
@media (max-width: 1024px) {
  .swiper {
    height: 300px;
  }
  // 服务
  .servebox {
    display: block;

    .serveleft {
      width: 100%;
      .servetext {
        width: 100%;
      }
    }
    .serveright {
      width: 100%;
    }
  }
  // 服务
  // 我们
  .usbox {
    display: block;
    .us {
      display: block;
      padding: 50px 0;
      width: 80%;
      .usone {
        width: 100%;
      }
      .ustwo {
        padding: 20px;
        .ustwotit {
          font-size: 20px;
        }
      }
    }
  }
  // 我们
  // 飞机
  .aircraftbox {
    .aircraft {
      width: 100%;
      padding: 50px 10px 0 10px;
    }
  }
  // 飞机
  // 质量和价格
  .weightbox {
  width: 100%;
  .weight {
    width: 100%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    .weighttit {
      font-size: 40px;
      font-weight: bold;
      margin-bottom: 50px;
    }
    .weightcent {
      text-align: center;
      .weighttop {
        display: block;
        .one {
          width: 100%;
          .onetop {
            font-weight: bold;
            color: white;
            background-color: #336cac;
            border: solid 1px #4a7eb8;
            padding: 40px 60px;
            box-sizing: border-box;
            .onetoptit1 {
              font-size: 25px;
            }
            .onetoptit2 {
              font-size: 55px;
            }
          }
          .onebot {
            padding: 20px 0;
            box-sizing: border-box;
            border: solid 1px #E8E8E8;
          }
        }
      }
      .weightbot {
        border: solid 1px #e9e9e9;
        width: 100%;
        color: #62646c;
        padding: 15px 0;
      }
    }
  }
}
  // 质量和价格
}

// 响应370px
@media (max-width: 370px) {
  // 服务
  .servebox {
    display: block;

    .serveleft {
      width: 100%;
      .servetext {
        width: 100%;
        .st-tit {
          font-size: 30px;
        }
      }
    }
    .serveright {
      width: 100%;
      .srbox {
        display: block;
        margin-top: 30px;
        .sr-one {
          width: 100%;
          margin: 0;
          box-sizing: border-box;
          .sro-img {
            width: 100%;
          }
        }
      }
    }
  }
  // 服务
  // 飞机
  .aircraftbox {
    .aircraft {
      width: 100%;
      padding: 50px 10px 0 10px;
      h1 {
        font-size: 25px;
      }
      .airtext {
        line-height: 20px;
        margin: 10px 0;
      }
      .airbut {
        padding: 10px;
      }
    }
  }
}
</style>